<template>
    <div class="container pt-lg-md">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <card type="secondary" shadow
                      header-classes="bg-white pb-5"
                      body-classes="px-lg-5 py-lg-5"
                      class="border-0">
                    <div class="row">
                        <div class="col-md-6">
                            <img :src="housePic" class="contentDiv" style="width:340px;height:240px" alt="">
                        </div>
                        <div @click="openHouse" class="col-md-4">
                            <div class="row justify-content-center mb-3">
                                <h5>{{msg.title}}</h5>
                            </div>
                            <div class="row justify-content-center mb-3">
                                <p style="text-align:left">
                                    {{msg.layout}} | {{hsize}}㎡ | {{hfloor}}层 | {{rentType}}
                                </p>
                            </div>
                            <div class="row justify-content-center mb-3">
                                <p>{{msg.address}}</p>
                            </div>
                            <div class="row justify-content-center mb-3">
                                <badge class="mt-1 mr-1" v-for='tag in msg.tags' :key="tag" type="primary">{{tag}}</badge>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="contentDiv">
                                <h5 v-if="msg.rentType === '长租'" style="color:orange">{{msg.rental}}元/月</h5>
                                <h5 v-else style="color:orange">{{hrental}}元/日</h5>
                            </div>
                        </div>
                    </div>
                    <template>
                        <div class="text-center mb-3">
                        </div>
                    </template>
                </card>
            </div>
        </div>
        <br />
    </div>
</template>

<script>
    export default {
        props: {
            // msg: {}
            msg:{
                title: String,
                layout: String,
                address: String,
                tags: Object,
            }
        },
        data () {
            return {
            }
        },
        computed:{
            hid(){
                return this.msg.id;
            },
            hsize(){
                return this.msg.area;
            },
            hfloor(){
                return this.msg.floor;
            },
            rentType(){
              if (this.msg.rentalmethod === 'shortr')
              {
                  return '短租'
              } else {
                  return '长租'
              }
            },
            hrental(){
                return this.msg.price;
            },
            housePic(){
                if (this.msg.photos){
                    return this.GLOBAL.BASE_URL + this.msg.photos[0];
                } else {
                    return "img/房屋1.jpeg";
                }
            }
        },
        methods: {
            openHouse(){
                this.$router.push({name: 'house', params: {'hid': this.hid}});
            }
        }
    }
</script>

<style scoped>

</style>
